<!-- 模板开始 -->
<style type="text/css">

    .showwords
    {
        font-size: 30px;
        position: absolute;
        z-index: 1;
        top: 86%;
        margin: -39px;
        width: 100%;
        text-align: center;
        height: 40px;
        line-height: 40px;
        letter-spacing: 9px;
        color: white;
        font-weight: bold;
        text-shadow: 3px 3px 10px black, 3px -3px 10px black, -3px 3px 10px black, -3px -3px 10px black;
        left: 40px;
    }

    *
    {
        padding: 0px;
        margin: 0px;
        -webkit-box-sizing: border-box;
    }

    body
    {
        background-color: black;
    }

    #container
    {
        width: 500px;
        height: 815px;
        position: absolute;
        overflow: hidden;
    }
    #container > div,#container > img
    {
        position: absolute;
    }
    .backdiv > div,.backdiv > img
    {
        position: absolute;
    }
    .bloon
    {
        left: 83px;
        position: absolute;
    }
    #div11h,#div22h,#div33h,#div44h
    {
        top: 424px;
    }
    #div11v,#div22v,#div33v,#div44v
    {
        top: 424px;
        left: 50px;
    }
    .divh
    {
        width: 500px;
        height: 360px;
        /*background-color: #9c9c9c;*/
        /*border: 7px solid #fff; */
        overflow: hidden;
        /*opacity: 0.7;*/
    }
    .divv
    {
        width: 400px;
        height: 580px;
        /*background-color: #9c9c9c;*/
        /*border: 7px solid #fff; */
        overflow: hidden;
        /*opacity: 0.7;*/
    }
    .divimgv
    {
        width: 400px;
        height: 580px;
        background-color: #9c9c9c;
        border: 7px solid #fff;
        overflow: hidden;
        top: 424px;
        left: 46px;
        position: absolute;
        /*opacity: 0.7;*/
    }
    .divimgh
    {
        width: 500px;
        height: 360px;
        background-color: #9c9c9c;
        overflow: hidden;
        border: 7px solid #fff;
        top: 424px;
        left: 0px;
        position: absolute;
    }
    #backdiv1
    {
        -webkit-transform: scale(0.1);
        left: 0px;
        top: 820px;
        -webkit-animation: balloon1 35s 5s linear infinite;

    }
    #backdiv2
    {
        -webkit-transform: scale(0.15);
        left: 80px;
        top: 600px;
        opacity: 0;
        -webkit-animation: balloon2 35s linear infinite;
    }
    #backdiv3
    {
        -webkit-transform: scale(0.25);
        left: 230px;
        top: 815px;
        -webkit-animation: balloon3 25s 1s linear infinite;
    }
    #backdiv4
    {
        -webkit-transform: scale(0.1);
        left: 380px;
        top: 815px;
        -webkit-animation: balloon1 40s 10s linear infinite;
    }
    .title
    {
        left: 88px;
        top: 405px;
    }
    #titlediv
    {
        width: 500px;
        height: 815px;
        opacity: 0;
        /*-webkit-animation: title_in 11s linear both;*/
    }
    .divbox
    {
        width: 500px;
        height: 815px;
        position: absolute;
        display: none;

    }
    #div1
    {
        /*-webkit-animation: balloon1h_in 20s linear both;*/
        -webkit-transform: translate(0px,0px) scale(0.1);
        opacity: 0;
    }
    #div2
    {
        -webkit-transform: translate(137px,475px) scale(0.15);
        /*-webkit-animation: balloon2h_in 17s linear both;*/
    }
    #div3
    {
        -webkit-transform: translate(-500px,0px) scale(0.8);
        /*-webkit-animation: balloon3h_in 10s linear both;*/
    }
    #div4
    {
        /*-webkit-animation: title_in 20s linear both;*/
        opacity: 0;
    }
    .img
    {
        position: absolute;
    }
</style>
<style type="text/css">
    @-webkit-keyframes fadein
    {
        from  {opacity: 0}
        to    {opacity: 1}
    }
    @-webkit-keyframes balloon1
    {
        from  {-webkit-transform: translate(0px,0px) scale(0.1);}
        to    {-webkit-transform: translate(40px,-900px) scale(0.1);}
    }
    @-webkit-keyframes balloon2
    {
        0%  {-webkit-transform: translate(0px,0px) scale(0.15);opacity: 0}
        10% {-webkit-transform: translate(0px,-90px) scale(0.15);opacity: 1}
        100%    {-webkit-transform: translate(0px,-800px) scale(0.15);opacity: 1}
    }
    @-webkit-keyframes balloon3
    {
        from  {-webkit-transform: translate(0px,0px) scale(0.25);}
        to    {-webkit-transform: translate(0px,-1200px) scale(0.25);}

    }
    @-webkit-keyframes title_in
    {
        0%  {-webkit-transform: translate(-92px,142px) scale(0.05);opacity: 0;-webkit-filter: blur(15px);}
        9%  {-webkit-transform: translate(-20px,126px) scale(0.2);opacity: 0.25;-webkit-filter: blur(11px);}
        18% {-webkit-transform: translate(41px,100px) scale(0.25);opacity: 0.5;-webkit-filter: blur(8px);}
        27% {-webkit-transform: translate(101px,60px) scale(0.35);opacity: 0.75;-webkit-filter: blur(4px);}
        36% {-webkit-transform: translate(131px,3px) scale(0.4);opacity: 1;-webkit-filter: blur(0px);}
        45% {-webkit-transform: translate(131px,-57px) scale(0.5);opacity: 1;-webkit-filter: blur(0px);}
        54% {-webkit-transform: translate(101px,-112px) scale(0.65);opacity: 1;-webkit-filter: blur(0px);}
        63% {-webkit-transform: translate(69px,-162px) scale(0.78);opacity: 1;-webkit-filter: blur(0px);}
        72% {-webkit-transform: translate(33px,-222px) scale(0.9);opacity: 1;-webkit-filter: blur(0px);}
        81% {-webkit-transform: translate(-6px,-296px) scale(1);opacity: 1;-webkit-filter: blur(0px);}
        90% {-webkit-transform: translate(-48px,-367px) scale(1.1);opacity: 0.5;-webkit-filter: blur(0px);}
        100%{-webkit-transform: translate(-93px,-438px) scale(1.2);opacity: 0;-webkit-filter: blur(00px);}
    }
    @-webkit-keyframes title_in_ar
    {
        0%  {-webkit-transform: translate(-92px,142px) scale(0.05);opacity: 0;}
        9%  {-webkit-transform: translate(-20px,126px) scale(0.2);opacity: 0.25;}
        18% {-webkit-transform: translate(41px,100px) scale(0.25);opacity: 0.5;}
        27% {-webkit-transform: translate(101px,60px) scale(0.35);opacity: 0.75;}
        36% {-webkit-transform: translate(131px,3px) scale(0.4);opacity: 1;}
        45% {-webkit-transform: translate(131px,-57px) scale(0.5);opacity: 1;}
        54% {-webkit-transform: translate(101px,-112px) scale(0.65);opacity: 1;}
        63% {-webkit-transform: translate(69px,-162px) scale(0.78);opacity: 1;}
        72% {-webkit-transform: translate(33px,-222px) scale(0.9);opacity: 1;}
        81% {-webkit-transform: translate(-6px,-296px) scale(1);opacity: 1;}
        90% {-webkit-transform: translate(-48px,-367px) scale(1.1);opacity: 0.5;}
        100%{-webkit-transform: translate(-93px,-438px) scale(1.2);opacity: 0;}
    }
    @-webkit-keyframes balloon1h_in
    {
        0%   {-webkit-transform: translate(145px,220px) scale(0.05);-webkit-filter: blur(5px);}
        80%  {-webkit-transform: translate(-20px,-320px) scale(0.9);-webkit-filter: blur(0px);}
        100% {-webkit-transform: translate(-251px,-611px) scale(1);-webkit-filter: blur(0px);}
    }
    @-webkit-keyframes balloon1h_in_ar
    {
        0%   {-webkit-transform: translate(145px,220px) scale(0.05);}
        80%  {-webkit-transform: translate(-20px,-320px) scale(0.9);}
        100% {-webkit-transform: translate(-251px,-611px) scale(1);}
    }
    @-webkit-keyframes balloon1fade
    {
        0%  {opacity: 0}
        20% {opacity: 1}
        80% {opacity: 1}
        100%{opacity: 0}
    }
    @-webkit-keyframes balloon2h_in
    {
        0%   {-webkit-transform: translate(137px,475px) scale(0.15);-webkit-filter: blur(5px);}
        80%  {-webkit-transform: translate(9px,-252px) scale(0.85);-webkit-filter: blur(0px);}
        100% {-webkit-transform: translate(-89px,-726px) scale(0.9);-webkit-filter: blur(0px);}
    }
    @-webkit-keyframes balloon3h_in
    {
        0%   {-webkit-transform: translate(-377px,-170px) scale(0.85);}
        65%  {-webkit-transform: translate(50px,-290px) scale(0.85);}
        100% {-webkit-transform: translate(477px,-370px) scale(0.9);}
    }
    @-webkit-keyframes balloon2h_in_ar
    {
        0%   {-webkit-transform: translate(137px,475px) scale(0.15);}
        80%  {-webkit-transform: translate(9px,-252px) scale(0.85);}
        100% {-webkit-transform: translate(-89px,-726px) scale(0.9);}
    }
    @-webkit-keyframes balloon3h_in_ar
    {
        0%   {-webkit-transform: translate(-377px,-170px) scale(0.85);}
        65%  {-webkit-transform: translate(50px,-290px) scale(0.85);}
        100% {-webkit-transform: translate(477px,-370px) scale(0.9);}
    }
    .img1
    {
        position: absolute;
        opacity: 0;
    }
    #bg
    {
        -webkit-animation: bgmove 5s linear infinite alternate;
    }
    @-webkit-keyframes bgmove
    {
        from  {-webkit-transform: translate(0px,0px);}
        to    {-webkit-transform: translate(-41px,0px);}
    }
</style>
<div id='container'>
    <img id='bg' src='{$skinurl}skin/ziyou/bg.jpg'>

    <div id='backdiv1' class='backdiv' style='-webkit-filter: blur(30px);'>

        <div id='div11h' class='divh'>
            <img id='img11h' class='img1'>
            <span id='word11h' class='showwords'></span>
        </div>
        <div id='div11v' class='divv'>
            <img id='img11v' class='img1'>
            <span id='word11v' class='showwords'></span>
        </div>
        <img class='bloon' src='{$skinurl}skin/ziyou/01.png'>
    </div>

    <div id='backdiv2' class='backdiv' style='-webkit-filter: blur(15px);'>
        <div id='div22h' class='divh'>
            <img id='img22h' class='img1'>
            <span id='word22h' class='showwords'></span>
        </div>
        <div id='div22v' class='divv'>
            <img id='img22v' class='img1'>
            <span id='word22v' class='showwords'></span>
        </div>

        <img class='bloon' src='{$skinurl}skin/ziyou/02.png'>
    </div>

    <div id='backdiv3' class='backdiv' style='-webkit-filter: blur(10px);'>
        <div id='div33v' class='divv'>
            <img id='img33v' class='img1'>
            <span id='word33v' class='showwords'></span>
        </div>

        <div id='div33h' class='divh'>
            <img id='img33h' class='img1'>
            <span id='word33h' class='showwords'></span>
        </div>
        <img class='bloon' src='{$skinurl}skin/ziyou/03.png'>
    </div>

    <div id='backdiv4' class='backdiv' style='-webkit-filter: blur(40px);'>
        <div id='div44h' class='divh'>
            <img id='img44h' class='img1'>
            <span id='word44h' class='showwords'></span>
        </div>
        <div id='div44v' class='divv'>
            <img id='img44v' class='img1'>
            <span id='word44v' class='showwords'></span>
        </div>
        <img class='bloon' src='{$skinurl}skin/ziyou/04.png'>
    </div>

    <div id='titlediv' class='backdiv'>

        <img class='title' src='{$skinurl}skin/ziyou/title.png'>

        <div style='position:absolute;width:250px;height:316px;top:430px;left:120px;overflow:hidden;display:table;'>
            <div id='titlecontent' style='width:250px;height:316px;vertical-align:middle;display:table-cell;text-align:center;font-size:32px;line-height:50px;color:#fff;text-shadow: 2px 2px 2px rgba(0,0,0,0.6);font-weight: bold;'></div>
        </div>
        <img class='bloon' src='{$skinurl}skin/ziyou/02.png'>

    </div>


    <div id='div2' class='divbox'>
        <div id='div2h' class='divimgh'>
            <img id='img2h' class='img'>
            <span id='word2h' class='showwords'></span>
        </div>
        <div id='div2v' class='divimgv'>
            <img id='img2v' class='img'>
            <span id='word2v' class='showwords'></span>
        </div>
        <img class='bloon' src='{$skinurl}skin/ziyou/04.png'>
    </div>
    <div id='div1' class='divbox'>
        <div id='div1v' class='divimgv'>
            <img id='img1v' class='img'>
            <span id='word1v' class='showwords'></span>
        </div>
        <div id='div1h' class='divimgh'>
            <img id='img1h' class='img'>
            <span id='word1h' class='showwords'></span>
        </div>
        <img class='bloon' src='{$skinurl}skin/ziyou/01.png'>
    </div>

    <div id='div4' class='divbox'>
        <div id='div4h' class='divimgh'>
            <img id='img4h' class='img'>
            <span id='word4h' class='showwords'></span>
        </div>
        <div id='div4v' class='divimgv'>
            <img id='img4v' class='img'>
            <span id='word4v' class='showwords'></span>
        </div>
        <img class='bloon' src='{$skinurl}skin/ziyou/02.png'>
    </div>
    <div id='div3' class='divbox'>
        <div id='div3h' class='divimgh'>
            <img id='img3h' class='img'>
            <span id='word3h' class='showwords'></span>
        </div>
        <div id='div3v' class='divimgv'>
            <img id='img3v' class='img'>
            <span id='word3v' class='showwords'></span>
        </div>
        <img class='bloon' src='{$skinurl}skin/ziyou/03.png'>
    </div>
</div>

<script>
    
    function id(name)
    {
        return document.getElementById(name);
    }

    var userAgent = '';
    function check_agent()
    {
        var u = navigator.userAgent;
        if(u.indexOf('Android') > -1 || u.indexOf('Linux') > -1)
        {
            userAgent = 'ar';
            id('backdiv1').style.webkitFilter = 'blur(2px)';
            id('backdiv2').style.webkitFilter = 'blur(2px)';
            id('backdiv3').style.webkitFilter = 'blur(1px)';
            id('backdiv4').style.webkitFilter = 'blur(2px)';
        }
        else
        {
            userAgent = 'ios';
            id('backdiv1').style.webkitFilter = 'blur(30px)';
            id('backdiv2').style.webkitFilter = 'blur(15px)';
            id('backdiv3').style.webkitFilter = 'blur(10px)';
            id('backdiv4').style.webkitFilter = 'blur(40px)';
        }

    }

    function showtitle()
    {
        check_agent();
        if(userAgent == 'ar')
        {
            id('titlediv').style.webkitAnimation = 'title_in_ar 10s linear both';
        }
        else
        {
            id('titlediv').style.webkitAnimation = 'title_in 10s linear both';
        }
        id('titlecontent').innerHTML = e_title;

        timeout[1] = setTimeout(show1,8000)
    }

    function show1()
    {
        setImage('1');
        id('div1').style.display = 'block';
        id('div2').style.display = 'none';
        id('div3').style.display = 'none';
        id('div4').style.display = 'block';
        if(userAgent == 'ar')
        {
            id('div1').style.webkitAnimation = 'balloon1h_in_ar 12s linear both,balloon1fade 12s linear both';
        }
        else
        {
            id('div1').style.webkitAnimation = 'balloon1h_in 12s linear both,balloon1fade 12s linear both';
        }

        id('div2').style.webkitAnimation = '';

        timeout[2] = setTimeout(show2,8000)
    }

    function show2()
    {
        setImage('2');
        id('titlediv').style.display = 'none';
        id('div1').style.display = 'block';
        id('div2').style.display = 'block';
        id('div3').style.display = 'none';
        id('div4').style.display = 'none';
        if(userAgent == 'ar')
        {
            id('div2').style.webkitAnimation = 'balloon2h_in_ar 11s linear both,balloon1fade 11s linear both';
        }
        else
        {
            id('div2').style.webkitAnimation = 'balloon2h_in 11s linear both,balloon1fade 11s linear both';
        }

        id('div3').style.webkitAnimation = '';

        timeout[3] = setTimeout(show3,8000)
    }

    function show3()
    {
        setImage('3');
        id('div1').style.display = 'none';
        id('div2').style.display = 'block';
        id('div3').style.display = 'block';
        id('div4').style.display = 'none';
        if(userAgent == 'ar')
        {
            id('div3').style.webkitAnimation = 'balloon3h_in_ar 11s linear both,balloon1fade 11s linear both';
        }
        else
            id('div3').style.webkitAnimation = 'balloon3h_in 11s linear both,balloon1fade 11s linear both';
        id('div4').style.webkitAnimation = '';

        timeout[4] = setTimeout(show4,7000)
    }

    function show4()
    {
        setImage('4');
        id('div1').style.display = 'none';
        id('div2').style.display = 'none';
        id('div3').style.display = 'block';
        id('div4').style.display = 'block';
        if(userAgent == 'ar')
            id('div4').style.webkitAnimation = 'title_in_ar 14s linear both';
        else
            id('div4').style.webkitAnimation = 'title_in 14s linear both';
        id('div1').style.webkitAnimation = '';

        timeout[5] = setTimeout(show1,11000)
    }

    function showbackimg()
    {
        setImage('11');
        setImage('22');
        setImage('33');
        setImage('44');
        id('img11h').style.webkitAnimation = 'fadein 1s linear both';
        id('img11v').style.webkitAnimation = 'fadein 1s linear both';
        id('img22h').style.webkitAnimation = 'fadein 1s linear both';
        id('img22v').style.webkitAnimation = 'fadein 1s linear both';
        id('img33h').style.webkitAnimation = 'fadein 1s linear both';
        id('img33v').style.webkitAnimation = 'fadein 1s linear both';
        id('img44h').style.webkitAnimation = 'fadein 1s linear both';
        id('img44v').style.webkitAnimation = 'fadein 1s linear both';
        // id('backdiv1').style.webkitAnimation = 'balloon1 35s 5s linear infinite';
        // id('backdiv2').style.webkitAnimation = 'balloon2 35s linear infinite';
        // id('backdiv3').style.webkitAnimation = 'balloon3 25s 1s linear infinite';
        // id('backdiv4').style.webkitAnimation = 'balloon1 40s 10s linear infinite';
        image_url_index = 0;
    }

    var image_size_width=[];
    var image_size_height=[];
    var image_url_index=0;
    var have_num = 0;
    var error_num = 0;
    var canshow = true;
    var reshow = false;
    var timeout = [];


    var delaytime=3000;

    //每次执行加载后5张图片
    var bl_keepload = 'first';
    var step_loadnum = 5;
    function step_load()
    {
        var load_num = 0
        //初步加载X张
        if(image_url_index  == 0 && bl_keepload == 'first')
        {
            console.log('loading continue');
            if(slider_images_url.length > step_loadnum)
            {
                load_num = step_loadnum;
                bl_keepload = 'next';
            }
            else
            {
                load_num = slider_images_url.length;
                bl_keepload = 'end';
            }
            for(var i = 0; i< load_num; i++)
            {
                var img=new Image();
                img.index=i;
                img.src=slider_images_url[i];
                Onload_imgs_url[i] = 'loading';
                img.onload=image_onload;
                img.onerror= image_onerror;

            }
        }
        else if(bl_keepload == 'end')
        {
            return;
        }
        else
        {
            console.log('loading continue');
            if(slider_images_url.length - image_url_index >step_loadnum*2)
            {
                load_num = step_loadnum;
            }
            else
            {
                load_num = slider_images_url.length - image_url_index - step_loadnum;
                bl_keepload = 'end';
            }
            for(var i = image_url_index +step_loadnum; i< image_url_index + step_loadnum + load_num; i++)
            {
                var img=new Image();
                img.index=i;
                img.src=slider_images_url[i];
                Onload_imgs_url[i] = 'loading';
                img.onload=image_onload;
                img.onerror= image_onerror;

            }
        }
    }

    function load_images()
    {
        reshow = false;
        image_size_width=[];
        image_size_height=[];
        Onload_imgs_url=[];
        image_url_index=0;
        have_num = 0;
        error_num = 0;
        begin_titletime = new Date();
        begin_titletime = begin_titletime.getTime();
        showtitle();
        canshow = true;

        bl_keepload = 'first';
        step_load();
    }

    function image_onerror(event)
    {
        var img = event.target;
        var index = img.index;
        if(index<step_loadnum)
            error_num ++;
        Onload_imgs_url[index] = 'not find';
        console.log(Onload_imgs_url[index]);
        if((have_num+error_num >= step_loadnum || slider_images_url.length == (have_num+error_num)) && canshow == true)
        {
            reshow = false;
            canshow =false;
            if(have_num == 0)
                return;
            var end_titletime = new Date();
            end_titletime = end_titletime.getTime();
            var dis_titletime = Math.abs(end_titletime-begin_titletime);
            if(dis_titletime>delaytime)
            {
                showbackimg();
            }
            else
            {
                dis_titletime = delaytime- dis_titletime;
                timeout[0] = setTimeout(function()
                {
                    showbackimg();
                },dis_titletime);
            }
        }
    }

    function image_onload(event)
    {
        if(reshow == true)
            return;

        var img = event.target;
        var index = img.index;

        if(index<step_loadnum)
        {
            have_num++;
        }
        Onload_imgs_url[index] = img.src;
        image_size_height[index] = img.height;
        image_size_width[index] = img.width;

        console.log(Onload_imgs_url[index]);

        if((have_num + error_num >= step_loadnum ||slider_images_url.length == (have_num+error_num)) && canshow == true)
        {
            reshow = false;
            canshow =false;
            if(have_num == 0)
                return;
            var end_titletime = new Date();
            end_titletime = end_titletime.getTime();
            var dis_titletime = Math.abs(end_titletime-begin_titletime);
            if(dis_titletime>delaytime)
            {
                showbackimg();
            }
            else
            {
                dis_titletime = delaytime- dis_titletime;
                timeout[0] = setTimeout(function()
                {
                    showbackimg();
                },dis_titletime);
            }

        }
    }
    function setImage(idname)
    {
        if(reshow == true)
            return;

        while(Onload_imgs_url[image_url_index] == 'not find' || Onload_imgs_url[image_url_index] == 'loading')
        {
            if(image_url_index % step_loadnum == 0)
            {
                step_load();
            }
            image_url_index++;
            if(image_url_index == Onload_imgs_url.length)
                image_url_index = 0;
        }

        if(image_url_index % step_loadnum == 0)
        {
            step_load();
        }

        var img_bili = image_size_width[image_url_index]/image_size_height[image_url_index];
        var div;
        var div1;
        var divname;

        if(img_bili > 1)
        {
            divname = idname + 'h';
            div = id('div'+idname+'h');
            div1 = id('div'+idname+'v');
            width = 500;
            height = 360;

        }
        else
        {
            divname = idname + 'v';
            div = id('div'+idname+'v');
            div1 = id('div'+idname+'h');
            width = 400;
            height = 580;

        }

        var word = id('word'+divname);
        var word_string = words[get_pid(Onload_imgs_url[image_url_index])];
        if(word_string != undefined)
        {
            word_string = word_string.replace(/[\n]/ig,'');
            word_length = word_string.length;

            if(word_length <= 4)
            {
                word.style.fontSize = "36px";
                word.innerText = word_string;
            }else{
                word.style.fontSize = "30px";
                if(word_length > 10)
                {
                    word_string = insertEnter(word_string, 5);
                }
                word.innerText = word_string;
            }
        }
        else
        {
            word.innerText = "";
        }

        div.style.display = 'block';
        div1.style.display = 'none';

        var img = id('img'+divname);
        img.src = Onload_imgs_url[image_url_index];
        console.log(img.src);

        if(img_bili > (width/height))
        {
            img.style.top = '0px';
            img.style.height = height + 'px';
            img.style.width = height*img_bili + 'px';
            img.style.left = -((height*img_bili-width)/2)+'px';
        }
        else
        {
            img.style.left = '0px';
            img.style.width = width+'px';
            img.style.height = width/img_bili + 'px';
            img.style.top = -((width/img_bili-height)/2) + 'px';
        }

        image_url_index++;
        if(image_url_index==Onload_imgs_url.length)
            image_url_index = 0;
    }
    function insertEnter(str,n){
        var len = str.length;
        var strTemp = '';
        if(len > n){
            strTemp = str.substring(0,n);
            str = str.substring(n,len);
            return strTemp+'\n'+str;
        }else{
            return str;
        }
    }

    call_me(load_images);

    function reload_scene()
    {
        clearnode()
        reshow = true;
        setTimeout(load_images,100)
    }

    function clearnode()
    {
        id('titlediv').style.webkitAnimation = '';
        id('div1').style.webkitAnimation = '';
        id('div2').style.webkitAnimation = '';
        id('div3').style.webkitAnimation = '';
        id('div4').style.webkitAnimation = '';
        id('titlediv').style.display = 'block';
        for(var i=0;i<timeout.length;i++)
        {
            clearTimeout(timeout[i])
        }
    }
</script>
<!-- 模板结束 -->